<template>
	<view class="container">
		<view class="list_item_box br_8 bc_fff plr_16 mt_8" v-for="item,index in dataList" :key="index">
			<view class="fx aic">
				<view class="fx aic bob_1 boc_grey ptb_12 fx_1 flow_h">
					<uni-icons custom-prefix="iconfont" type="icon-shangdian" color="#999" size="32rpx"></uni-icons>
					<view class="ml_4 fx_1 flow_h">{{item.brandName||''}}</view>
				</view>
			</view>
			<navigator hover-class="none" :url="getUrl(item1)" class="p_12 fx aic"
				v-for="item1,index1 in item.list" :key="index1">
				<view class="fx_1 fx flow_h">
					<CustomImage width="160rpx" height="160rpx" radius="8rpx" :src="item1.productImage"></CustomImage>
					<view class="ml_12 fx_1 aistr fx fx_col jcb flow_h">
						<view class="fe_2 lh_18 height_36">
							{{item1.productName||''}}
						</view>
						<view class="fx fx_nw aie jcb">
							<view class="fc_primary fz_16 fb">
								<text class="fz_10">￥</text>
								{{item1.amount||0}}
							</view>
							<button class="custom_btn default fz_12 width_78 lh_30 br_26 boc_999"
								@click.stop="handleCancel(item1,index,index1)">取消收藏</button>
						</view>
					</view>
				</view>
			</navigator>
		</view>
		<view class="pt_16">
			<u-loadmore :status="loadingStatus" />
		</view>
	</view>
</template>

<script>
	import CustomImage from '@/components/Image'
	import api from '@/service/config/api.js'
	import dataMixin from '@/mixins/data.js'
	export default {
		mixins: [dataMixin],
		components: {
			CustomImage,
		},
		data() {
			return {
				loading: false,
				dataList: [],
				listDataList: [],
				listUrl: '/user/api/tMyCollect/page',
			};
		},
		computed: {
			getUrl() {
				return item => {
					console.log(item)
					const goodsType = Number((item.goodsType == null || item.goodsType == undefined) ? 1 : (this
							.$utils.goodsTypeDir(item.goodsType)))
					const goodsId = (goodsType > 1 && goodsType < 6) ? (item.goodsRuleId || item.productId) : item.productId
					return `/pages/goods/pages/detail?id=${goodsId}&goodsType=${goodsType}`
				}
			}
		},
		onShow() {
			this.getData(true)
		},
		methods: {
			getData(refresh = false) {
				return new Promise(resolve => {
					this.isSearching = true
					if (refresh) {
						this.current = 1
						this.total = 1
						this.$utils.loading()
					} else {
						this.loading = true
					}
					if (this.listUrl) {
						api.get(this.listUrl, {
							current: this.current,
							size: this.size,
							...this.params ? this.params : {}
						}).then(res => {
							if (res.data.records && res.data.records.length) {
								if (this.dataList.length && this.dataList[this.dataList.length - 1]
									.brandName == res.data.records[0].brandName && !
									refresh) {
									let list = res.data.records.reduce((arr, item) => {
										let pItem = arr.find(item1 => item1.brandId == item
											.brandId)
										if (pItem) {
											pItem.list.push(item)
										} else {
											arr.push({
												brandId: item.brandId,
												brandName: item.brandName,
												list: [item]
											})
										}
										return arr
									}, [this.dataList[this.dataList.length - 1]])
									this.dataList.splice(this.dataList.length - 1, 1, ...list)
								} else {
									let list = res.data.records.reduce((arr, item) => {
										let pItem = arr.find(item1 => item1.brandId == item
											.brandId)
										if (pItem) {
											pItem.list.push(item)
										} else {
											arr.push({
												brandId: item.brandId,
												brandName: item.brandName,
												list: [item]
											})
										}
										return arr
									}, [])
									this.dataList = refresh ? (list || []) : [...this.dataList, ...(
										lists || [])]
								}
							}
							this.listDataList = refresh ? (res.data.records || []) : [...this.listDataList,
								...(res
									.data
									.records || [])
							];
							if (res.data.total <= this.listDataList.length) {
								this.end = true
							}
						}).finally(() => {
							this.loading = false
							this.initLoading = false
							resolve()
						})
					}
				})
			},
			handleCancel(data, index, index1) {
				this.$utils.loading()
				api.delete('/user/api/tMyCollect/removeByGoodsId', [data.productId]).then(res => {
					this.$utils.showToast('取消收藏成功');
					this.dataList[index].list.splice(index1, 1)
					if (!this.dataList[index].list.length) {
						this.dataList.splice(index, 1)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {}
</style>